* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #e6e6fa;
}
.bear {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 200px;
  height: 100px;
  background: url(../images/bear.png) no-repeat;
  /* z-index: 2; */
  animation: bear 600ms steps(8) infinite, move 3s forwards;
}
.bg1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: url(../images/bg1.png) repeat-x;
  animation: bg 30s linear infinite;
}
.bg2 {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  height: 450px;
  background: url(../images/bg2.png) repeat-x;
  animation: bg 50s linear infinite;
}
@keyframes bear {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes move {
  from {
    left: 0;
    transform: translateX(-100%);
  }
  to {
    left: 50%;
    transform: translateX(-50%);
  }
}
@keyframes bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3840px 0;
  }
}
